<template>
  <div class="body-wrapper">
    <div>
      <van-card v-for="(item, index) in boughtBusiness" :key="index">
        <template #price></template>
        <template #desc></template>
        <template #num></template>

        <template #thumb>
          <img class="card-thumb" :src="item.avatar" />
        </template>

        <template #title>
          <div class="card-panel-left" @click="toBusiness()">
            <div class="card-title_img">
              <span class="card-title">{{ item.storeName }}</span>
              <img
                class="card-title-img"
                src="/src/assets/icon/xiala-copy.svg"
              />
            </div>
          </div>
        </template>

        <template #footer>
          <div class="card-order">
            <div class="card-orderInfo">上次买过 共{{ 1 }}件 ¥{{ 15.99 }}</div>
            <br />
            <div class="card-food">{{ "套餐：原味无骨烤鱼+W+GGG+GG" }}</div>
          </div>
          <div class="card-footer" @click="toBusiness()">
            <van-button size="mini" @click="toBusiness(item)"
              >再来一单</van-button
            >
          </div>
        </template>

        <template #tags>
          <div class="card-tags">
            <van-tag color="#F8CECC" text-color="#F1857E" plain>834m</van-tag>
            <van-tag color="#F8CECC" text-color="#F1857E" plain
              >免配送费</van-tag
            >
            <van-tag color="#F8CECC" text-color="#F1857E" plain
              >接收预订</van-tag
            >
          </div>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import http from "../../../utils/http";
import { ref, computed, onMounted, reactive } from "vue";
const router = useRouter();
function toBusiness(index) {
  router.push({
    path: "/business",
    query: {
      merchantId: orderInfo.value[index].businessId,
    },
  });
}
//根据用户id查询，该用户买过的商家
const boughtBusiness = ref();
const getBusinessInfo = async () => {
  try {
    const response = await http.get("/order/getBoughtIdByUserId", {
      params: {
        userId: localStorage.getItem("userId"),
      },
    });
    boughtBusiness.value = response.data.data;
  } catch {}
};
onMounted(() => {
  getBusinessInfo();
});
// const toBusiness = (item) => {
//   router.push({
//     path: "/business",
//     query: {
//       merchantId: item.value.businessId,
//     },
//   });
// };
</script>




<style lang="scss" scoped>
.body-wrapper {
  width: 100vw;
  background: linear-gradient(
    to bottom,
    #fae45b 0%,
    #fbe869 3%,
    #f8ec8a 5%,
    #f7eead 7%,
    #f4f4f4 10%
  );
}

.card-thumb {
  width: 60px;
  height: 45px;
  margin-left: 15px;
  /* margin-top: 5px; */
}

.card-footer {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: -65px;
  margin-bottom: 3px;
  background-color: #f9f9f9;
}

.card-order {
  float: left;

  .card-orderInfo {
    color: #858688;
    float: inline-start;
    margin-top: 10px;
    margin-left: 10px;
  }

  .card-food {
    font-size: 13px;
    color: black;
    float: inline-start;
    margin-top: 5px;
    margin-left: 10px;
  }
}

.card-panel-left {
  height: auto;

  .card-title_img {
    .card-title {
      /* display: inline-block; */
      font-size: 16px;
      color: black;
      font-weight: bold;
      margin-bottom: 52px;
      /* margin-top:20px; */
      margin-left: -16px;
    }

    .card-title-img {
      height: 16px;
      margin-left: 115px;
      margin-bottom: -1px;
    }
  }
}

.card-tags {
  height: auto;
  margin-top: 10px;
  margin-bottom: 65px;
  margin-left: -16px;
}

::v-deep(.van-tag) {
  width: auto;
  border-radius: 3px;
  margin-right: 5px;
  text-align: center;
}

::v-deep(.van-card) {
  width: 95%;
  margin-bottom: 10px;
  background-color: #ffffff;
  border-radius: 10px;
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 1px;
  margin-left: 10px;
  box-shadow: 0px 20px #f5f5f5;
}

::v-deep(.van-button) {
  min-width: 75px;
  height: 33px;
  margin-right: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
  /* margin: 20px 0px 10px 11px; */
  font-size: 13px;
  font-weight: bold;
  border-radius: 15px;
  background-color: white;
}
</style>